<template>
	<div class="wrap">
		<div class="head">
			<div class="headline">
				<span class="title">运维事件看板</span>
			</div>
		</div>
		<div class="body">
			<div style="padding: 0 12px;overflow: hidden;height: 100%;">
				<table border="0" cellspacing="0" style="height: 100%;">
					<thead>
						<tr>
							<th style="width: 20%;">报警时间</th>
							<th style="width: 20%;">企业</th>
							<th style="width: 20%;">设备</th>
							<th style="width: 20%;">运维类型</th>
							<th style="width: 20%;">运维企业</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in tableData" :key="index">
							<td style="width: 20%;">{{item.time}}</td>
							<td style="width: 20%;">{{formatStr(item.deptName)}}</td>
							<td style="width: 20%;">{{item.deviceName}}</td>
							<td style="width: 20%;">{{formatStr(item.type)}}</td>
							<td style="width: 20%;">{{formatStr(item.maintenanceDeptName)}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</template>
<script>
	import {getMaintenance} from "@/api/bigScreen/bigScreen";
	export default {
		data() {
			return {
				// 酒店对油烟  其他队扬尘
				tableData: [],
				timer: null,
				timer2: null,
				allList: [],
				count: 7
			}
		},
		mounted() {			
			this.init()
			let that=this
			this.timer = setInterval(this.infoControllTimer, 2000);
			this.timer2=setInterval(function(){
				clearInterval(that.timer)
				that.init()
				that.timer = setInterval(that.infoControllTimer, 2000);
			},300000)  			
		},
	    beforeDestroy() {
	       clearInterval(this.timer)
           clearInterval(this.timer2)
	    },		
		methods: {
			formatStr(str){
				if(str&&str.length>=8){
					str='****'+str.substring(str.length-5,str.length)
				}
				return str
			},
			infoControllTimer() {
				this.count++
					this.tableData.shift();
				if(this.count <= this.allList.length-1) {
					this.tableData.push(this.allList[this.count])
				} else {
					this.count = 0
					this.tableData.push(this.allList[this.count])
				}
			},
//			compare(property) {
//				return function(a, b) {
//					var value1 = a[property];
//					var value2 = b[property];
//					return value2 - value1;
//				}
//			},
			init() {
				
				// 创建8调数据
				getMaintenance().then(res=>{
					this.allList = res.data.data
					for(var i = 0; i < 8; i++) {
						this.tableData.push(this.allList[i])
					}					
				})
//				let arr = []
//				for(var i = 0; i < 99; i++) {
//					arr.push(this.createData())
//				}
//				arr.sort(this.compare('timer'))
//				this.allList = arr
//				for(var i = 0; i < 8; i++) {
//					this.tableData.push(this.allList[i])
//				}

			},
//			add0(m) {
//				return m < 10 ? '0' + m : m
//			},
//			formatTimer(timer) {
//				var time = new Date(timer);
//				var y = time.getFullYear();
//				var m = time.getMonth() + 1;
//				var d = time.getDate();
//				var h = time.getHours();
//				var mm = time.getMinutes();
//				var s = time.getSeconds();
//				return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s);
//			},
//			createData() {
//				let obj = {}
//				let item = this.operDashBoard[Math.ceil(Math.random() * 9) % 9]
//				var timer = new Date().getTime()
//				timer = timer - parseInt(Math.random() * 3 * 3600000)
//				obj.timer = timer
//				obj.date = this.formatTimer(timer)
//				obj.name = item.entName
//				obj.deviceName = item.deviceName
//				obj.pointName = item.pointName
//				obj.operDesc = item.operDesc
//				obj.operUser = item.operUser				
//				return obj
//
//			}
		}
	}
</script>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}
	
	.wrap {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	
	.head {
		margin-bottom: 4px;
	}
	
	.body {
		flex: 1;
		width: 100%;
		overflow: hidden;
		table {
			width: 100%;
		}
		table thead tr th {
			color: #3591ff;
			font-size: 12px;
		}
		table tbody tr:nth-child(2n) {
			background-color: #17213d;
		}
		table tbody tr td {
			text-align: center;
			padding: 6px 0;
			color: #fff;
			font-size: 12px;
			line-height: 1.25;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
	
	.headline {
		display: flex;
		color: #fff;
		.title {
			background: #131420;
			padding: 8px 15px;
			display: inline-block;
			font-size: 14px;
			box-shadow: inset 0 0 10px 0 rgba(53, 145, 255, .8);
			border: 1px solid #3591ff80;
		}
	}
</style>